<template>
  <div>
    <el-card header="反馈列表">
      <el-table :data="dataList" border>
        <el-table-column prop="content" show-overflow-tooltip label="反馈内容" align="center"/>
        <el-table-column prop="createTime" label="反馈时间" align="center"/>
        <el-table-column prop="reply" show-overflow-tooltip label="回复内容" align="center"/>
        <el-table-column prop="updateTime" label="回复时间" align="center"/>
      </el-table>
      <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="currentChange" @size-change="sizeChange" layout="total,sizes,prev,pager,next,jumper" :total="pageInfo.total"/>
    </el-card>
    <el-card>
      <div slot="header">
        <span>意见反馈</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="save">发送反馈</el-button>
      </div>
      <el-form :model="formData" ref="formData" :rules="rules" label-width="100px">
        <el-form-item label-width="反馈内容" prop="content">
          <el-input type="textarea" v-model="formData.content" :rows="4" maxlength="200" show-word-limit placeholder="请输入反馈内容"/>
        </el-form-item>
        <el-form-item label="是否匿名">
          <el-radio-group v-model="formData.anonymous">
            <el-radio :label="1">匿名</el-radio>
            <el-radio :label="2">实名</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>
<script>
const formData = {
  content: '',
  anonymous: 1
}
export default {
  name: 'FeedbackPage',
  data () {
    return {
      formData: { ...formData },
      dataList: [],
      rules: {
        content: [{
          required: true,
          message: '请输入反馈内容！'
        }]
      },
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      }
    }
  },
  methods: {
    getDataList () {
      this.$http.get('api/vip/feedback/page', this.pageInfo).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getDataList()
    },
    sizeChange (val) {
      this.pageInfo.limit = val
      this.getDataList()
    },
    save () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$http.post('api/vip/feedback/save', this.formData).then(() => {
            this.$message.success('反馈成功！')
            this.getDataList()
            this.$refs.formData.resetFields()
          }).catch(() => {})
        }
      })
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped>

</style>
